<template>
  <Back />
  <div class="p-20px bg-#FBFBFB min-h-100vh box-border">
    <div class="text-center font-size-2.4rem">{{ $t('invite.invite.title') }}</div>
    <div class="text-center font-size-2rem m-y8px">
      {{ $t('invite.invite.get') }}
      <span class="color-#3AA1A2">{{ $t('invite.invite.gift') }}</span>
      {{ $t('invite.invite.unit') }}
    </div>

    <div class="text-center font-size-2rem m-y8px">
      {{ $t('invite.invite.friend') }}
      <span class="color-#3AA1A2">{{ $t('invite.invite.friendGift') }}</span>
      {{ $t('invite.invite.unit') }}
    </div>

    <div class="text-center font-size-2rem m-y8px">
      {{ $t('invite.invite.friend2') }}
      <span class="color-#3AA1A2">{{ $t('invite.invite.friendGift2') }}</span>
      {{ $t('invite.invite.friendUnit2') }}
    </div>

    <div class="text-center font-size-2rem m-y8px">
      {{ $t('invite.invite.all') }}
    </div>

    <div class="m-t8px qrcode">
      <van-divider>{{ $t('invite.invite.repeat') }}</van-divider>
    </div>

    <div>
      <div class="color-#999999 font-size-1.4rem p-b-2px">{{ $t('invite.invite.link') }}</div>
      <div class="w-100%"><textarea class="input" :value="link" readonly /></div>
    </div>
    <div class="text-center m-t-20px">
      <van-button :loading="loading" block round color="#3AA1A2" @click="copy">
        {{ $t('invite.invite.copy') }}
      </van-button>
    </div>

    <div class="color-#999999 font-size-1.4rem m-t-20px">{{ $t('invite.invite.link2') }}</div>
    <div class="flex justify-center qrcode">
      <div class="relative">
        <vue-qr :text="onlyLink" :size="220"></vue-qr>
      </div>
    </div>

    <div class="box m-t20px">
      <van-divider>{{ $t('invite.invite.step') }}</van-divider>
      <div class="color-#999999 font-size-1.4rem">
        {{ $t('invite.invite.stepInfo') }}
      </div>
    </div>

    <div class="box m-t20px">
      <van-divider>{{ $t('invite.invite.result') }}</van-divider>
      <div class="flex justify-center">
        <div class="m-r30px">
          <div class="font-size-1.6rem color-#666 m-b20px">{{ $t('invite.invite.success') }}</div>
          <div class="text-center color-#3AA1A2 font-size-2rem">
            {{ inviteInfo?.invites }}<span class="font-size-1.4rem">{{ $t('invite.invite.people') }}</span>
          </div>
        </div>
        <div>
          <div class="font-size-1.6rem color-#666 m-b20px">{{ $t('invite.invite.got') }}</div>
          <div class="text-center color-#3AA1A2 font-size-2rem">
            {{ inviteInfo?.rewards }}<span class="font-size-1.4rem">{{ $t('invite.invite.cup') }}</span>
          </div>
        </div>
      </div>

      <div class="m-y16px">
        <div class="msg" v-for="item in invites">
          <div class="font-size-1.2rem">{{ item.createTime }}</div>
          <div class="font-size-1.4rem">{{ item.newUsername }} {{ $t('invite.invite.receive') }}</div>
        </div>
      </div>

      <div class="text-center m-t16px">
        <van-button round color="#3AA1A2" @click="records">
          {{ $t('invite.invite.records') }}
        </van-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const { t } = useI18n()

const router = useRouter()

const link = ref('')
const inviteInfo = ref<ApiInviteVO>()
const loading = ref(false)

const invites = ref<ApiUserInvite[]>()

onMounted(async () => {
  apis.api.userShopInviteLink(undefined, loading).then(d => (link.value = d))
  apis.api.userAssetInviteInfo().then(d => (inviteInfo.value = d))
  apis.api.userAssetRecentInvites().then(d => (invites.value = d))
})

const copy = async () => {
  try {
    await navigator.clipboard.writeText(link.value)
    showToast(t('invite.invite.copyOk'))
  } catch (err) {
    showToast(t('invite.invite.copyFail'))
  }
}

const onlyLink = computed(() => {
  const result = (link.value || '').split('https://')
  if (result.length == 2) {
    return 'https://' + result[1]
  }
  return ''
})

function records() {
  router.push('/inviteRecords')
}

function downloadQrcode() {}
</script>
<style lang="scss" scoped>
.input {
  resize: none;
  font-size: 1.4rem;
  color: #666666;
  line-height: 1.6rem;
  width: 100%;
  height: 6rem;
}

.box {
  padding: 20px 10px;
  background-color: #ffffff;
  border-radius: 6px;
}
.msg {
  padding: 8px 16px;
  background: #f6f6f6;
  border-radius: 10px 10px 10px 2px;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
